<template>
	<view class="pending_cases">
		<view class="top-tab"></view>
		<!-- 搜索 -->
		<view class="uni-form">
			<view class="uni-form-item uni-column">
				<input type="text" name="eventName" class="uni-input" v-model="searchForm1.eventName"
					placeholder="请输入案件名称" autocomplete="off" />
				<image @click="searchEvent" src='@/static/city-manage/uni-search.png' class="icon_close"></image>
			</view>
		</view>
		<!-- 案件列表 -->
		<view class="task_list">
			<view class="task_item" v-if="eventData && eventData.length>0" v-for="(item, index) in eventData"
				:key="index">
				<view class="item_left">
					<image v-if="item.smallImgData && item.smallImgData.length>0" :src="img_item"
						v-for="(img_item, img_index) in item.smallImgData" :key="img_index"
						@click="seeImages(img_index, item.bigImgData)" mode="aspectFit"></image>
				</view>
				<view class="item_right">
					<view class="task_top">
						<view class="task_type">{{item.eventTypeLv2Name}}
						<view style="margin-left: 10upx; display: inline-block;"  v-if="userInfo.role.roleKey == 'czry'">
							<icons type="timeFill" size="28upx"  :color="item.params.overResult"></icons>
						</view>
						</view>
						<view class="details_btn" @click="eventDetails(item)">详情</view>
					</view>
					<view class="task_date">
						<view>{{item.createTime}}</view>
						<image class="outTime" src="../../static/city-manage/p_yingji.png"
							v-if="item.archivesTypeLeveThree.isJj == '是'"></image>
						<image class="outTime" src="../../static/city-manage/p_yinhuan.png"
							v-if="item.archivesTypeLeveThree.isTf == '是'"></image>
						<image class="outTime" src="../../static/city-manage/p_yanqi.png"
							v-if="item.archivesTypeLeveThree.isYq == '是'"></image>
						<image class="outTime" src="../../static/city-manage/p_huanban.png"
							v-if="item.archivesTypeLeveThree.isHb == '是'"></image>
					</view>
					<view class="task_status">{{item.eventDealStatusName}}</view>
					<view class="task_desc">案件描述：{{item.eventDescribe}}</view>
					<view class="task_address">
						<view>案件地址：{{item.eventAddress}}</view>
						<image @click="toggleMap(item.gdx, item.gdy)" src="../../static/city-manage/uni-address.png">
						</image>
					</view>
				</view>
			</view>
			<!-- <view class="uni-loadmore" v-if="showLoadMore">{{loadMoreText}}</view> -->
			<uni-load-more :status="status"></uni-load-more>
		</view>

		<!-- 地图弹出层 -->
		<uni-popup ref="popupMap" type="center" :mask-click="false" background-color="#fff">
			<view class="popup-content">
				<image @click="closeToggleMap" class="close_map" src="../../static/city-manage/close_map.png"></image>
				<public-map ref="publicMapDialog" :gdx="gdx" :gdy="gdy"></public-map>
			</view>
		</uni-popup>

		<!-- 右上角搜索 -->
		<uni-drawer ref="showRight" mode="right" :width="300">
			<search-task @getTaskList="getPendingTaskList" :reciveType="pageTaskType"></search-task>
		</uni-drawer>
	</view>
</template>

<script>
	import {getPendingTaskListJgczry,getPendingTaskListPtjl} from '@/api/pending_cases.js';
	import publicMap from '@/pages/mycomponents/publicMap.nvue';
	import searchTask from '@/pages/mycomponents/searchTask.vue'
	import Icons from "../../components/lz-icons/icons.vue"
	import URL from '@/util/url.js'
	export default {
		components: {
			'public-map': publicMap,
			'search-task': searchTask,
			'icons':Icons
		},
		data() {
			return {
				//用户登录信息
				pageTaskType:'3',
				userInfo: uni.getStorageSync('userInfo'),
				searchForm1: {
					eventName: "",
					params: {
						isDealStatus: 0,
						userId: '',
					}
				},
				eventData: [],
				bigImgData: [],
				smallImgData: [],
				imgUrl:URL.CASEIMAGE_URL,
				// imgUrl: 'http://www.qjjxh.com:8081/file',
				gdx: null,
				gdy: null,
				//监听抽屉是否打开
				isDrawer: false,
				//判断是从哪个页面进入到详情的
				type: '',
				status: 'loading',
				pageSize: 10,
				pageNum: 1,
				total: 0,
				options:{}
			}
		},
		onLoad(options) {
			this.type = options.type;
			//获取我的案件列表
			this.getPendingTaskList();
		},
		//页面生命周期---监听原生标题栏按钮点击事件
		onNavigationBarButtonTap() {
			//关闭地图
			this.$refs.popupMap.close();
			//打开筛选抽屉
			setTimeout(() => {
				this.$refs.showRight.open();
			}, 500);
		},
		onReachBottom() {
			if (this.pageSize * this.pageNum > this.total) {
				this.status= 'noMore';
				return;
			} else {
				this.pageNum = this.pageNum + 1;
				this.status= 'loading';
			}

			setTimeout(() => {
				this.getPendingTaskList();
			}, 300);
		},
		onPullDownRefresh() {
			this.resetParam();
			this.status= 'loading';
			this.getPendingTaskList();
		},
		methods: {
			resetParam() {
				this.pageSize = 10;
				this.pageNum = 1;
				this.total = 20;
				this.eventData =[];
			},
			//查询案件
			searchEvent() {
				this.resetParam();
				this.getPendingTaskList();
			},
			//获取我的案件列表
			getPendingTaskList(data) {
				let options = null,
					_this = this;
				if (data === undefined) {
					let to = this.pageNum==1?{}:this.options;
					options = {
						...to,
						eventName: this.searchForm1.eventName,
						params: {
							userId: this.userInfo.userId,
							isDealStatus: '0' //0---未处置, 1---已处置
						},
						pageSize: this.pageSize,
						pageNum: this.pageNum

					}
				} else if (data !== undefined) {
					options = data;
					this.resetParam();
					options.pageSize = this.pageSize;
					options.pageNum = this.pageNum;
					options.params.userId = this.userInfo.userId;
					this.eventData = [];
				}
				this.options = options;
				uni.showLoading();
				//机构处置人员-----待办案件列表
				let url = null;
				if (this.userInfo.role.roleKey == 'jgczry' || this.userInfo.role.roleKey == 'czry') {
					url = getPendingTaskListJgczry;
				} else if (this.userInfo.role.roleKey == 'ptjl') {
					url = getPendingTaskListPtjl;
				}
				url(options).then((res) => {
					if (res.code === 200) {
						let eventData = res.rows;
							eventData.forEach((ele, index) => {
							let images = JSON.parse(ele.params.images.value);
							ele.smallImgData = [];
							ele.bigImgData = [];
							for (var i = 0; i < images.length; i++) {
								if (images[i].size_type === "0") {
									ele.smallImgData.push(this.imgUrl + images[i].path);
								} else if (images[i].size_type === "1") {
									ele.bigImgData.push(this.imgUrl + images[i].path);
								}
							}
						});

						this.eventData = [...this.eventData, ...eventData];
						this.total = res.total;

						if (this.pageSize * this.pageNum >= this.total) {
							this.status = 'noMore'
						} else {
							this.status = 'more'
						}

					} else {
						this.$tip.toast(res.msg);
					}
					uni.hideLoading();
					this.$refs.showRight.close();
					uni.stopPullDownRefresh();
				}).catch((error) => {
					uni.hideLoading();
					this.$refs.showRight.close();
					uni.stopPullDownRefresh();
				})
			},
			eventDetails(eventItem) {
				let url = null;
				if (this.userInfo.role.roleKey == 'jgczry' || this.userInfo.role.roleKey == 'czry') {
					url = '/pages/my-task/eventDetails?eventItem=' + JSON.stringify(eventItem) + '&type=' + this.type;
				} else if (this.userInfo.role.roleKey == 'ptjl') {
					url = '/pages/pending-cases/handlingResult?eventItem=' + JSON.stringify(eventItem);
				}
				uni.navigateTo({
					url: url
				})
			},
			//案件列表查看大图
			seeImages(index, bigImgData) {
				let _this = this;
				uni.previewImage({
					urls: bigImgData,
					current: index,
					longPressActions: {
						//itemList: ['发送给朋友', '保存图片', '收藏'],//按钮的文字数组
						success: function(data) {
						},
						fail: function(err) {
						}
					}
				});
			},
			//点击位置查看地图
			toggleMap(gdx, gdy) {
				this.gdx = gdx;
				this.gdy = gdy;
				this.$refs.popupMap.open();
				//等元素渲染完成后再调地图
				setTimeout(() => {
					this.$nextTick(() => {
						// #ifdef H5
						this.$refs.publicMapDialog.initMap();
						// #endif
					});
				}, 500);
			},
			//关闭弹出层
			closeToggleMap() {
				this.$refs.popupMap.close();
			}
		},
		watch: {

		},
		onBackPress(e){
			if(e.from == 'backbutton') {
				uni.reLaunch({
					url: '/pages/home'
				});

				return true;
			} else {
				uni.navigateBack();
			}

		}
	}
</script>

<style lang="scss">
	.pending_cases {
		.top-tab {
			height:60rpx;
			background:#c4534c;
			position: fixed;
			top: 0rpx;
			left: 0rpx;
			right: 0rpx;
			margin-top: 0px;
			/* #ifdef H5 */
			margin-top: 44px;
			/* #endif */
		}

		.uni-form {
			position: fixed;
			top: 0px;
			left: 0px;
			right: 0px;
			z-index: 9;
			background: white;
			border-radius: 20rpx;
			padding:20rpx;
			box-shadow: #b5cede 0px 0px 10px;
			margin: 0rpx 40rpx 0;
			/* #ifdef H5 */
			top: 44px;
			/* #endif */
			.uni-form-item {
				display: flex;
				flex-direction: row;
				align-items: center;
				border: 1px solid #ccc;
				border-radius: 20rpx;
				padding: 0;

				.uni-input {
					height: 60rpx;
					border-radius: 20rpx;
				}

				image {
					width: 36rpx;
					height: 36rpx;
					margin-right: 10rpx;
				}
			}
		}

		.task_list {
			padding: 150rpx 0 20rpx;

			.nodata {
				text-align: center;
				color: $qj-color;
				font-size: 15px;
			}

			.task_item {
				margin: 0 44rpx;
				box-shadow: #b5cede 0px 0px 10px;
				background: white;
				border-radius: 20rpx;
				padding: 20rpx;
				display: flex;
				align-items: center;
				margin-bottom: 30rpx;

				.item_left {
					width: 168rpx;
					height: 264rpx;
					border: 1px solid #ccc;
					margin-right: 20rpx;

					image {
						width: 100%;
						height: 100%;
					}

					image:first-child~image {
						display: none;
					}
				}

				.item_right {
					width: calc(100% - 208rpx);

					.task_top {
						display: flex;
						justify-content: space-between;
						align-items: center;

						.task_type {
							font-size: 32rpx;
							color: $qj-color;
						}

						.details_btn {
							width: 84rpx;
							height: 52rpx;
							background-image: url(../../static/city-manage/uni-task-details.png);
							background-repeat: no-repeat;
							background-position: 100% 100%;
							background-size: 100%;
							text-align: center;
							color: #fff;
							line-height: 52rpx;
							font-size: 24rpx;
						}
					}

					.task_date {
						color: $qj-gary;
						font-size: 24rpx;
						display: flex;
						align-items: center;

						.outTime {
							width: 32rpx;
							height: 32rpx;
							margin-left: 10rpx;
						}
					}

					.task_status {
						color: #ff5722;
						font-size: 30rpx;
					}

					.task_desc,
					.task_address {
						color: $qj-black;
						font-size: 26rpx;
						text-align: justify;
					}

					.task_address {
						width: 100%;
						display: flex;
						flex-direction: row;

						view {
							text-overflow: ellipsis;
							overflow: hidden;
							white-space: nowrap;
							flex: 1;
						}

						image {
							width: 40rpx;
							height: 40rpx;
						}
					}
				}
			}
		}
	}

	//地图弹出层
	.uni-popup__wrapper-box {
		.popup-content {
			background-color: #fff;
			padding: 20rpx;
			position: relative;
			width: 640rpx;
			// #ifdef APP-PLUS
			height: 1000rpx;
			// #endif
			// #ifdef H5
			height: 1000rpx;
			// #endif
			.close_map {
				width: 30rpx;
				height: 30rpx;
				position: absolute;
				right: -24rpx;
				top: -22rpx;
				background: #fff;
				border: 4rpx solid #ccc;
				border-radius: 50%;
				padding: 10rpx;
				z-index: 999999;
			}

		}
	}

	//搜索抽屉
	.uni-drawer__content--visible {
		width: 600rpx !important;
	}
</style>
